<template>
  <div class="oneDiv">
    <div class="sumDiv">
      <!-- 新增按钮和搜索框start -->
      <div class="headFromDiv">
        <div class="rightDiv">
          <el-row class="elrow">
            <el-col>
              <el-form
                :inline="true"
                :model="searchData"
                class="demo-form-inline"
              >
                <el-form-item>
                  <el-input
                    v-model="searchData.sealName"
                    placeholder="请输入关键字"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="seachTableData()">搜索</el-button>
                  <el-button @click="resetQuery()">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </div>
      <!-- 新增按钮和搜索框end-->
      <!-- 左侧树 -->
      <div class="leftDiv2">
        <el-menu class="menu">
          <el-submenu index="all">
            <template slot="title">
              &nbsp; &nbsp;全部 &nbsp; &nbsp; &nbsp; &nbsp;
              <el-tag type="success">{{ total1 }}</el-tag>
            </template>
            <el-menu-item @click="searchAll"
              >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;全部 &nbsp; &nbsp; &nbsp;
              &nbsp; &nbsp;<el-tag type="success">{{
                total1
              }}</el-tag></el-menu-item
            >
          </el-submenu>
          <el-submenu index="delivery">
            <template slot="title">集团总部</template>
            <el-menu-item @click="searchData1">总经办</el-menu-item>
            <el-menu-item @click="searchData2">财务部</el-menu-item>
            <el-menu-item @click="searchData3">人事部</el-menu-item>
            <el-menu-item @click="searchData4">行政部</el-menu-item>
          </el-submenu>
          <el-menu-item class="item" @click="searchData5"
            >上海办事处</el-menu-item
          >
          <!-- <el-submenu index="takeout">
             el-menu-item @click="searchData1">总经办</el-menu-item>
            <el-menu-item @click="searchData2">财务部</el-menu-item>
            <el-menu-item @click="searchData3">人事部</el-menu-item>
            <el-menu-item @click="searchData4">行政部</el-menu-item> -->
          <!-- </el-submenu>  -->
          <!-- <el-submenu index="bank">
            <template slot="title">北京办事处</template>
            <el-menu-item @click="searchData1">总经办</el-menu-item>
            <el-menu-item @click="searchData2">财务部</el-menu-item>
            <el-menu-item @click="searchData3">人事部</el-menu-item>
            <el-menu-item @click="searchData4">行政部</el-menu-item>
          </el-submenu>
          <el-submenu index="hotel">
            <template slot="title">深圳办事处</template>
            <el-menu-item @click="searchData1">总经办</el-menu-item>
            <el-menu-item @click="searchData2">财务部</el-menu-item>
            <el-menu-item @click="searchData3">人事部</el-menu-item>
            <el-menu-item @click="searchData4">行政部</el-menu-item>
          </el-submenu> -->
          <el-menu-item class="item" @click="searchData6"
            >北京办事处</el-menu-item
          >
          <el-menu-item class="item" @click="searchData7"
            >深圳办事处</el-menu-item
          >
        </el-menu>
      </div>
      <!-- 表格信息展示start -->
      <div class="bottomDiv">
        <div v-if="tableData.length > 0" class="bottomDiv2">
          <ul class="ultable">
            <li
              v-for="(data, index) in tableData"
              :key="index"
              class="table-item"
            >
              <div class="avatar-wrapper">
                <el-avatar
                  style= "width: 50px; height: 50px;display: inline-block"
                  src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                ></el-avatar>
              </div>
              <div class="info-wrapper">
                <h2>{{ data.name }}</h2>
                <p>部门：{{ data.department }}</p>
                <p>职位：{{ data.zhiWei }}</p>
                <p>固定电话：{{ data.fixedTelephone }}</p>
                <p>移动电话：{{ data.mobilePhone }}</p>
                <p>电子邮件：{{ data.email }}</p>
              </div>
            </li>
          </ul>
        </div>
        <div v-else>
          <p>没有查询结果。</p>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 6, 10, 15, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <!-- 表格信息展示end -->
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      // 条查以及分页的表单
      pageNum: 1,
      pageSize: 6,
      total: 0,
      searchData: {
        currentPage: 1,
        pageSize: 6,
        total: 0,
      },
      tableData: [],
      total1: "",
    };
  },
  created() {
    // 初始化条查
    this.seachTableData();
  },

  methods: {
    // 查询
    seachTableData() {
      this.searchData.currentPage = this.pageNum;
      this.searchData.pageSize = this.pageSize;
      axios.post("address2/queryAddress2", this.searchData).then((res) => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        this.total1 = res.data.data.total;
        console.log(res);
      });
    },

    //重置按钮
    resetQuery() {
      this.searchData = {};
      this.seachTableData();
    },
    //分页
    handleSizeChange(val) {
      this.pageSize = val;
      this.seachTableData();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.pageNum = val;
      this.seachTableData();
    },
    // 时间按钮递增
    handleChange(value) {
      console.log(value);
    },
    //左侧条查
    searchData1() {
      (this.searchData.fromColumn = 1), this.seachTableData();
    },
    searchData2() {
      (this.searchData.fromColumn = 2), this.seachTableData();
    },
    searchData3() {
      (this.searchData.fromColumn = 3), this.seachTableData();
    },
    searchData4() {
      (this.searchData.fromColumn = 4), this.seachTableData();
    },
    searchData5() {
      (this.searchData.fromColumn = 5), this.seachTableData();
    },

    searchData6() {
      (this.searchData.fromColumn = 6), this.seachTableData();
    },
    searchData7() {
      (this.searchData.fromColumn = 7), this.seachTableData();
    },
    searchAll() {
      (this.searchData.fromColumn = ""), this.seachTableData();
    },
  },
};
</script>

<style scoped>
.oneDiv {
  width: 100%;
  height: 100%;
  margin-top: -14px;
  background-color: rgba(244, 244, 244, 1);
  padding-top: 20px;
}

/* 装信息和条查的盒子 */
.sumDiv {
  width: 100%;
  height: 1000px;
  margin: auto;
}

/* 搜索框和按钮的盒子 */
.headFromDiv {
  width: 90%;
  height: 80px;
  /* margin: auto; */
  background-color: #fff;
  border-radius: 9px;
}
.table-item {
  display: flex;
  /* align-items: center; */
  /* margin-top: 50px; */
  
}

.avatar-wrapper {
  margin-right: 20px; /* 图片和文字之间的间距 */
  margin-top: 10px; /* 顶部边距 */
}


.info-wrapper {
  flex-grow: 1; /* 文字内容占据剩余空间 */
}

/* 左侧的 */
.leftDiv {
  float: left;
  padding-top: 20px;
  padding-left: 30px;
  background-color: #fff;
}

.rightDiv {
  float: right;
  margin-top: 20px;
  margin-right: 15px;
}

.bottomDiv {
  width: 68%;
  height: 100%;
  /* margin: auto; */
  float: left;
  margin-top: 20px;
  padding-top: 20px;
  background-color: #fff;
  border-radius: 9px;
  margin-left: 72px;
}
.ultable {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style-type: none;
  padding: 0;
}
.ultable li {
  width: calc(30% - 5px); /* 使用 calc 函数减去间距 */
  margin-bottom: 20px; /* 调整每个条目之间的间距 */
  padding: 10px;
  border: 1px solid #ccc; /* 添加边框样式 */
  box-sizing: border-box; /* 确保边框不会增加元素的宽度 */
  margin-left: 80px; /* 调整每个盒子之间的间距 */
}

/* 分页的盒子 */
.block {
  text-align: right;
  margin-top: 10px;
  margin-right: 20px;
}

.el-row {
  margin-bottom: 20px;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.block {
  margin-top: 20px;
  text-align: right;
  padding-right: 20px;
}
.leftDiv2 {
  width: 18%;
  height: 100%;
  background-color: #fff;
  float: left;
  margin-top: 48px;
  border-radius: 10 px;
}
.item {
  text-align: center;
  margin-top: 20px;
  border-radius: 20px;
}

li {
  display: inline-block;
  margin-right: 90px; /* 可选，为了在li之间添加间隔 */
}
</style>